<template>
  <div class="container">
    <div class="main">
      <problem-info :problem='problem'></problem-info>
      <coder :preset='problem.problem_preset'></coder>
    </div>
  </div>
</template>

<script>
import ProblemInfo from './components/ProblemInfo.vue'
import Coder from './components/Coder.vue'
import { getProblemDetail } from '@/api/problem'

export default {
  data () {
    return {
      problem: {}
    }
  },
  components: {
    ProblemInfo,
    Coder
  },
  mounted () {
    getProblemDetail(this.$route.params.problemId)
      .then(res => {
        this.problem = res.data[0]
        this.$route.meta.title = this.problem.problem_title
      })
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.main
  display flex
  flex-direction row
  justify-content space-between
  width 80vw
  margin 50px auto 0
  padding 8px
  background-color #666
  box-sizing border-box
  border-radius 10px
  box-shadow 2px 4px 6px shadow-color
  .part
    padding 10px 20px
    width 49.5%
    height 75vh
    background-color #fff
    box-sizing border-box
    border-radius 6px
    box-shadow 4px 5px 4px shadow-color
</style>
